<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="compact-form">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="真实姓名">
              <a-input placeholder="请输入真实姓名" v-decorator="['realName', validatorRules.realName ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="昵称">
              <a-input placeholder="请输入昵称" v-decorator="['nickname', validatorRules.nickname ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="联系电话">
              <a-input placeholder="请输入联系电话" v-decorator="['phone', validatorRules.phone ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="微信账号">
              <a-input placeholder="请输入微信账号" v-decorator="['wechatAccount', validatorRules.wechatAccount ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="支付宝账号">
              <a-input placeholder="请输入支付宝账号" v-decorator="['alipayAccount', validatorRules.alipayAccount ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="技术栈">
              <a-select
                mode="multiple"
                style="width: 100%"
                placeholder="请选择技术栈"
                v-decorator="['stacks', validatorRules.stacks]"
                @change="handleStacksChange">
                <a-select-option v-for="(item, index) in stacksOptions" :key="item.value" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="程序价格">
              <a-input-number style="width: 100%" placeholder="请输入程序价格(可选)" v-decorator="['programPrice', validatorRules.programPrice ]" :precision="2" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="{span: 6}"
              :wrapperCol="{span: 18}"
              label="论文价格">
              <a-input-number style="width: 100%" placeholder="请输入论文价格(可选)" v-decorator="['paperPrice', validatorRules.paperPrice ]" :precision="2" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :labelCol="{span: 3}"
              :wrapperCol="{span: 21}"
              label="备注">
              <a-textarea placeholder="请输入备注" v-decorator="['remark', {}]" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'

  export default {
    name: "BProgrammerInfoModal",
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          realName: {rules: [{ required: true, message: '请输入真实姓名!' }]},
          nickname: {rules: [{ required: false, message: '请输入昵称!' }]},
          wechatAccount: {rules: [{ required: true, message: '请输入微信账号!' }]},
          alipayAccount: {rules: [{ required: true, message: '请输入支付宝账号!' }]},
          phone: {rules: [{ required: true, message: '请输入联系电话!' }]},
          stacks: {rules: [{ required: true, message: '请选择技术栈!' }]},
          programPrice: {rules: [{ required: false, message: '请输入程序价格!' }]},
          paperPrice: {rules: [{ required: false, message: '请输入论文价格!' }]},
        },
        url: {
          add: "/order/bProgrammerInfo/add",
          edit: "/order/bProgrammerInfo/edit",
        },
        stacksOptions: [] // 技术栈选项
      }
    },
    created () {
      this.loadStacksOptions();
    },
    methods: {
      // 加载技术栈选项
      loadStacksOptions() {
        // 从字典中获取技术栈选项
        const that = this;
        httpAction('/sys/dict/getDictItems/stacks', {}, 'get').then(res => {
          if (res.success) {
            that.stacksOptions = res.result;
          }
        });
      },
      
      // 处理技术栈选择变化
      handleStacksChange(value) {
        console.log('选择的技术栈:', value);
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          // 处理技术栈数据，如果是字符串，则转换为数组
          let stacks = this.model.stacks;
          if (stacks && typeof stacks === 'string') {
            stacks = stacks.split(',');
          }
          
          const formValues = pick(this.model, 'realName', 'nickname', 'wechatAccount', 'alipayAccount', 'phone', 'programPrice', 'paperPrice', 'remark');
          formValues.stacks = stacks;
          
          this.form.setFieldsValue(formValues);
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            
            // 处理技术栈数据，将数组转换为字符串
            if (values.stacks && Array.isArray(values.stacks)) {
              values.stacks = values.stacks.join(',');
            }
            
            let formData = Object.assign(this.model, values);
            
            console.log('提交的表单数据:', formData);
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>
  /* 紧凑型表单样式 */
  .compact-form /deep/ .ant-form-item {
    margin-bottom: 12px;
  }
  
  .compact-form /deep/ .ant-form-item-label {
    line-height: 32px;
  }
  
  .compact-form /deep/ .ant-form-item-control {
    line-height: 32px;
  }
</style> 